<template>
  <div class="wran-Type-wrap">
    <common-Wrap :name="'预警类型占比'">
      <template v-slot:content>
        <div id="wranTypeEcharts" style="height: 100%;"></div>
      </template>
    </common-Wrap>
  </div>
</template>
<script>
    import commonWrap from '@/components/customComponents/commonWrap.component'
    import api from "@/api/common.api";
    export default {
        components: {
            // commonDialog,
            commonWrap,
        },
        data () {
            return {
              warnList: []
            }
        },
        methods: {
            getWarnTypeRate () {
                api.getWarnTypeRate().then(res=>{
                    this.warnList = res.content
                    this.initEchart()
                })
            },
            initEchart () {
                let noramlSize = 16;
                let nameList = []
                let dataArr = []
                this.warnList.forEach(v=>{
                    nameList.push(v.fraud_type)
                    dataArr.push({value: v.num, name: v.fraud_type, rate: v.rate})
                })
                console.log('ss', dataArr)
                var datas = {
                    imageUrl:
                        "",
                    imageUrl2:
                        "",
                    colors: ["#4bdcff", "#3698fd", "#2365c3", "#c3b801", "#e54835"],
                    legendArr: nameList,
                    dataArr: dataArr,
                    company: ""
                };
                let option = {
                    color: datas.colors,
                    grid: {
                        left: "7%",
                        right: "7%",
                        bottom: "15%",
                        top: "5%"
                    },
                    graphic: {
                        elements: [
                            {
                                type: "image",
                                style: {
                                    image: datas.imageUrl2,
                                    width: 250,
                                    height: 250
                                },
                                left: "center",
                                top: "13%"
                            },
                            {
                                type: "image",
                                style: {
                                    image: datas.imageUrl,
                                    width: 180,
                                    height: 180
                                },
                                left: "center",
                                top: "24%"
                            },
                        ],
                    },
                    tooltip: {
                        trigger: "item",
                        backgroundColor: "#f6f6f6",
                        textStyle: {
                            color: "#000"
                        },
                        formatter: "{b}: {c}"+datas.company+" ({d}%)"
                    },
                    series: [
                        {
                            name: "",
                            type: "pie",
                            radius: ["45%", "60%"],
                            center: ["50%", "55%"],
                            itemStyle: {
                                normal: {
                                    borderWidth: 0,
                                    borderColor: "rgb(19, 52, 116)"
                                }
                            },
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: true,
                                    formatter:function(v){
                                        return ` {label|${v.data.rate}}\n\n {label|${v.name}}\n\n   {value|${v.data.value}}`
                                    },
                                    rich:{
                                        label:{
                                            color:"#fff",
                                            textAlign: 'center',
                                            fontSize:noramlSize
                                        },
                                        value:{
                                            color:"#3fb9f6",
                                            textAlign: 'center',
                                            fontSize:16
                                        }
                                    }
                                },
                                emphasis: {
                                    show: true,
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: true,
                                    lineStyle:{
                                        color:"#666"
                                    },
                                    length:20,
                                    length2:30,
                                }
                            },
                            data: datas.dataArr
                        },
                    ]
                };
                let myChart = this.$echarts.init(document.getElementById('wranTypeEcharts'))
                myChart.setOption(option)
            }
        },
        mounted() {
            this.getWarnTypeRate()
        }
    }
</script>
<style lang="stylus">
  .wran-Type-wrap{
    height: 100%;
  }
</style>
